<template>
  <div>
    <header-top :title=title >
      <div @click="back()" class="back" slot="back"></div>
    </header-top>
    <div style="background:#f8f8f8" class="content clearfix">
      <div @click="showSelect" class="select">
        请选择分析选项：{{name}}
      </div>
      <div class="echat">
        <div id="echartContainer" style="width:100%; height:450px"></div>
      </div>


    </div>

    <div v-if="show" class="zz"></div>
    <van-picker
      class="fixedBottom"
      v-if="show"
      show-toolbar
      title="请选择分析选项"
      :columns="columns"
      @cancel="onCancel"
      @confirm="onConfirm"
      :default-index=index
    />
  </div>

</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import {reqStudentAnalyze} from "@/api";

  var echarts = require('echarts')
  export default {
    name: "studentAnalyzeDetail",
    components:{
      headerTop:headerTop,
    },
    data(){
      return{
        title:'成绩分析',
        option: {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            itemGap:20,
            padding: [
              20,  // 上
              10, // 右
              0,  // 下
              10, // 左
            ],
            data:['语文','数学','英语','物理']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top:'90',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2018.3','2018.4','2018.5']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'语文',
              type:'line',
              stack: '总量',
              data:['100','90','110']
            },
            {
              name:'数学',
              type:'line',
              stack: '总量',
              data:['50','120','80']
            },
            {
              name:'外语',
              type:'line',
              stack: '总量',
              data:['150','60','80']
            },
            {
              name:'物理',
              type:'line',
              stack: '总量',
              data:['60','40','90']
            },
          ]
        },
        show:false,
        index:0,
        name:'各科成绩走势',
        columns: [{text:'各科成绩走势',type:'subject'},{text:'总成绩走势',type:'score'},{text:'班级排名走势',type:'classRank'},{text:'年级排名走势',type:'gradeRank'}],
        analyze:null,
      }
    },
    async mounted(){
      this.params =  this.$route.query
      this.title = this.params.studentName
      let studentAnalyze = await reqStudentAnalyze(this.params.studentId,this.params.gradeId)
      this.analyze = studentAnalyze.data
      this.Analyze("subject")
      //初始化图表


    },
    methods:{
      back(){
        this.$router.replace({path:'/class/exam/studentAnalyze'})
      },
      showSelect(){
        this.show = true;
      },
      onCancel() {
        this.show = false
      },
      onConfirm(value,index){
        //确认选择
        this.name = value.text
        this.index = index
        this.show = false
        this.Analyze(value.type)
        this.$forceUpdate();//重新渲染
      },
      Analyze(type){
        //初始化科目
        this.option.legend.data = []
        let subject = [];
        //初始化X轴
        this.option.xAxis.data = []
        //初始化成绩
        this.option.series = []

        //科目成绩分析
        if(type == "subject"){
          console.log("科目成绩分析")
          this.option.yAxis.inverse = false
          for (let i = 0;i< this.analyze.length; i ++){
            //设置X轴
            this.option.xAxis.data.unshift(this.analyze[i].subjectList.examName)
            for(let key in this.analyze[i].subjectList){
              //设置科目
              if(key != 'examName'){
                subject.push(key)
              }
            }
          }
          //科目去重
          this.option.legend.data = Array.from(new Set(subject));
          //设置成绩科目
          for (let subKey of this.option.legend.data) {
            this.option.series.push(
              {
                name:subKey,
                type:'line',
                data:[]
              }
            )
          }
          //填入成绩
          for (let item of this.analyze){
            for(let i = 0;i< this.option.series.length; i++){
              let exam = this.option.series[i]

              if(item.subjectList[exam.name] != null){
                //如果有成绩  填入数组
                exam.data.unshift(item.subjectList[exam.name])
              }else{
                // 如果没有成绩添加0站位
                exam.data.unshift('0')
              }
            }
          }
        //  总成绩走势
        }else if(type == "score"){
          console.log("总成绩走势")
          this.option.yAxis.inverse = false
          this.option.legend.data=["总分"]
          this.option.series = {
            name:'总分',
            type:'line',
            data:[]
          }
          for (let i = 0;i< this.analyze.length; i ++){
            //设置X轴
            this.option.xAxis.data.unshift(this.analyze[i].subjectList.examName)
            this.option.series.data.unshift(this.analyze[i].scoreList.score)
          }

        //  班级排名
        }else if(type == "classRank"){
          console.log("班级排名")
          this.option.yAxis.inverse = true //y轴反向
          this.option.legend.data=["班级排名"]
          this.option.series = {
            name:'班级排名',
            type:'line',
            data:[]
          }
          for (let i = 0;i< this.analyze.length; i ++){
            //设置X轴
            this.option.xAxis.data.unshift(this.analyze[i].subjectList.examName)
            this.option.series.data.unshift(this.analyze[i].scoreList.classRank)
          }
        // 年级排名
        }else if(type == "gradeRank"){
          console.log("班级排名")
          this.option.yAxis.inverse = true
          this.option.legend.data=["年级排名"]
          this.option.series = {
            name:'年级排名',
            type:'line',
            data:[]
          }
          for (let i = 0;i< this.analyze.length; i ++){
            //设置X轴
            this.option.xAxis.data.unshift(this.analyze[i].subjectList.examName)
            this.option.series.data.unshift(this.analyze[i].scoreList.gradeRank)
          }

        }

        //画图
        var myChart = echarts.init(document.getElementById('echartContainer'));
        myChart.setOption(
          this.option
        )
        myChart.clear();
        myChart.setOption(this.option,true);
      }

    }
  }
</script>

<style scoped>
  .echat{ width: 100%; height: 450px; background: #fff;}
</style>
